<template>
    <div class="wrap"  @click="zufun(i)">
       <div>
          <dl>
              <dt>
                  <img :src="img[0].largeimg">
              </dt>
              <dd>
                  <h2>
                      {{name}}
                  </h2>
                  <h3>
                      <span>{{subtitle}}</span>
                      
                  </h3>
                  <h4>
                      {{houseSubtitle}}
                  </h4>
                  <h5><span>{{tit[0].tit1}}</span><span>{{tit[0].tit2}}</span><span>{{tit[0].tit3}}</span></h5>
                  <div>
                      <p>
                          <span>{{price3}}</span>元/月
                      </p>
                      
                  </div>
              </dd>
          </dl>
       </div>

    </div>
</template>

<script>
export default {
     props: [
    "name",
    "img",
    "pemane",
    "price3",
    "tit",
    "house",
    "people",
    "subtitle",
    "houseSubtitle",
    "i"
  ],
  methods:{
       zufun(i){
           let thisid=i
        //  console.log(thisid)
            this.$router.push({name:'deta',query:{thisid:thisid}});
        }
  }
}
</script>

<style scoped>
    .wrap{
        margin-bottom: 0.06rem;
        margin-top: 0.06rem;
    }
    dl{
        display: flex;
       flex-direction: row;
       padding: 0.1rem 0.2rem;
      
    }
    dl img {
        width: 1.25rem;
        height: 1.22rem;
    }
     dl h2{
         font-weight: bold;
         font-size: 0.15rem;
     }
     dl h3,h4{
         font-size: 0.1rem;
     }
     dl h3 span{
         margin-right: 0.1rem;
     }
     dl h5 span{
         margin-right: 0.1rem;
         font-size: 0.1rem;
         color:#849aae;
         background-color:#f1f3f5;
     }
     dl div{
         display: flex;
         align-items: flex-end;
     }
     dl div p{
         font-size: 0.1rem;
        margin-right: 0.1rem;
     }
     dl div p {
         color: red;
         font-size: 0.16rem;
     }
     dl dd{
         display: flex;
         flex-direction: column;
         justify-content: space-between;
        margin-left: 0.15rem;
     }
</style>